<template>
  <div v-show="state.option.show" :class="`title_main boxall`">
<!--    <label>{{state.option.title}}</label>-->
    <div class="alltitle">{{state.option.title}}
    </div>
    <div class="rounded-bg"/>
    <div class="boxfoot"/>
  </div>

</template>
<script setup lang="ts">
import {computed, defineProps, onMounted, reactive, watch} from "vue";
import {copyDefinedProperties} from "../../../utils/copy.ts"
defineOptions({
  name: 'Title'
})
const props = defineProps(['option']);
const state = reactive({
  option:{
    height:20,
    width:20,
    left:0,
    top:0,
    title:'test',
    show:true,
    type:'left',

  },
  window:{
    height:1700,
    width:800,
  }
});
watch(()=>props.option,(newValue,oldValue)=>{
  // console.log('workOrder变化了',newValue,oldValue)
  setting()
},{immediate:true,deep:true})
onMounted(()=>{
  setting()
})
function setting(){
  if(props.option!==undefined){
    // console.log(props.option)
    copyDefinedProperties(props.option,state.option)
    state.window={
      width: document.body.clientWidth,
      height: document.body.clientHeight
    }
  }
}
const left=computed(()=>`${(state.option.left/100)*state.window.width}px`)
const top=computed(()=>`${(state.option.top/100)*state.window.height}px`)
const height=computed(()=>`${(state.option.height/100)*state.window.height}px`)
const width=computed(()=>`${(state.option.width/100)*state.window.width}px`)
window.addEventListener('resize',()=>{
  // console.log("width,height",document.body.clientWidth,document.body.clientHeight)
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
})
</script>


<style scoped>
.boxall{ border: 1px solid rgba(25,186,139,.17); padding:0 .2rem .2rem .2rem;  background: rgba(255,255,255,.04) url(../../../../public/uistatic/image/line.png); background-size: 100% auto; position: relative; margin-bottom: .15rem; z-index: 10;}
.boxall:before,
.boxall:after{ position:absolute; width: .3rem; height: .3rem; content: "";  border-top: 2px solid #02a6b5; top: 0;}
.boxall:before,.boxfoot:before{border-left: 2px solid #02a6b5;left: 0;}
.boxall:after,.boxfoot:after{border-right: 2px solid #02a6b5; right: 0;}
.alltitle{
  color: white;
  border-bottom: 1px dotted rgba(255, 255, 255, .2);
}
.alltitle .pulll_right a{color: #fff;}
.alltitle .pulll_right a span{ display: inline-block; background: #58c485; width: .16rem; height: .16rem; vertical-align: middle; border-radius: 50%; margin: 0 .05rem 0 .1rem;}
.alltitle .pulll_right a:nth-child(2) span{ background: #ea7231;}
.alltitle .sebtn a{ opacity: .6; display: inline-block; padding: 0 .1rem}
.alltitle .sebtn a.active{ opacity:1}
.boxfoot{ position:absolute; bottom: 0; width: 100%; left: 0;}
.boxfoot:before,
.boxfoot:after{ position:absolute; width: .3rem; height: .3rem;  content: "";border-bottom: 2px solid #02a6b5; bottom: 0;}

.title_main{
  position: absolute;
  left:v-bind(left);
  top:v-bind(top);
  width: v-bind(width);
  height: v-bind(height);
  //color: white;
  text-align: center;
}
.rounded-bg{
  //height: v-bind(bgheight);
  //border-radius: v-bind(bgradius);
  //background-color: rgba(0, 0, 0, 0.16);
  ////background-color: white;
  //margin-top: 8px;
}
</style>
